<!-- name给组件重新命名 - devtools看到的名称
1. 安装插件npm i vite-plugin-vue-setup-extend -D
2. vite.config.js进行配置 
   import VueSetupExtend from 'vite-plugin-vue-setup-extend'
    plugins: [
        vue(),
        vueDevTools(),
        VueSetupExtend()
  ]
-->
<script setup lang="ts" name="Home01">
    //定义数据
    let name = 'admin';
    let n = 100;

    //定义方法
    function add(){
        //setup拿不到this
        //这样子的写法,数据不具备响应式
        n++
        console.log('add:'+n)
    }
</script>
<template>
    <div class="home">
        <h1>setup语法糖写法</h1>
        <h1>姓名:{{name}}</h1>
        <h4>N值:{{ n }}</h4>
        <button @click="add">点我+1</button>
    </div>
</template>
<style>

</style>